<template>
    <div class="dashboard-editor-container">
      <div class="typewriter">
        <p>{{ typedText }}</p>
      </div>
      <div class="bottom">
        <div class="inputtext" >
            <el-input placeholder="请输入内容,按回车结束" v-model="inputtext" style="margin-top: 100px;margin-left: 400px;" v-if="isshowinput" @change="chat">
                
            </el-input>
        </div>
        <div class="GIF" @click="showinput">
          <img class="tycm" src="../../../assets/tycm-3.gif"/>
        </div>        
      </div>
    </div>
  </template>
  
  <script>
  import {chat} from '../../../api/http.js'
  export default {
    name: 'Index',
  
    components: {
     
    },
    data() {
      return {
        text: '',
        typedText: '', // 用于存储逐个打印的文本
        index: 0 ,// 当前字符的索引
        inputtext:'',
        isshowinput:false,
      }
    },
    mounted(){
     
      this.typeWriter();
    },
    // updated(){
    //   this.typeWriter();
    // },
    methods: {
      showinput(){
        // console.log(process.env.ZSWD_API)
        console.log('nihao')
        this.isshowinput=!this.isshowinput
      },
      typeWriter() {
        console.log(this.index)
        console.log(this.text.length,'length')
        if (this.index < this.text.length) {
          this.typedText += this.text.charAt(this.index);
          this.index++;
          console.log(this.typedText)
          setTimeout(this.typeWriter, 100); // 调整这里的延迟时间可以改变打字速度
        }
      },
      chat(){
        this.typedText=''
        this.index=0
        this.text=''
        console.log('按回车了')
        chat(this.inputtext).then(res => {
          this.text=res.response.data
          console.log(this.text)
        })
        this.typeWriter()
        
      },
  
    }
  }
  </script>
  
  <style scoped>
  .dashboard-editor-container {
    display: flex;
    background: #020609;
    width: 100%;
    min-height: calc(100vh - 50px);
    flex-direction:column;
    justify-content: space-between;
    background-image: url('../../../assets/20230815101013.gif');
    background-size: cover;
  }
  .typewriter{
    margin: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    height: 600px;
    padding: 20px;
    font-family: Arial, sans-serif;
    overflow:scroll;
    font-size: 30px;
    font-weight: 600;
    letter-spacing: 5px;
    background: linear-gradient(to right, #008aff 0%, #00e1ff 50%, #01b6ff 90%);
    background-color: rgba(255, 255, 255, 0.7);
    -webkit-background-clip: text;
    color: transparent;
    white-space: pre-line;
    word-wrap: break-word; /* 设置word-wrap属性，实现自动换行 */
  
  }
  .typewriter::-webkit-scrollbar{
    width: 0;
  }
  .inputtext{
    width: 80%;
    justify-content: center;
    align-items: center;
    display: flex;
    margin-bottom: 100px;
   
  }
  .bottom{
    display: flex;
    height: 200px;
    justify-content: space-between;
    margin-bottom: 40px;
  }
  .tycm{
    height: 150px;
    width: 150px;
    
  }
  
  @media (max-width:1024px) {
    .chart-wrapper {
      padding: 8px;
    }
  }
  </style>
  <style lang="scss">
  .inputtext{
    opacity: .5;
    
    .el-input--medium .el-input__inner {
      height: 67px;
      line-height: 50px;
      font-size: 40px;
      color: rgb(216, 220, 220);
      background-color: transparent;
      border-color: transparent;//设置透明
   }
   .el-input-group__append{
    background-color: transparent;
    border-color: transparent;
   }
  }
  
  </style>